<template>
  <div>
    <div style="width: 200px;position: fixed;left: 14%;top:11%" v-if="comparedList.length>0">
      <el-card class="box-card">
        <div slot="header" class="clearfix" style="text-align: center">
          <span>对比(<span style="font-size:14px;color: #007bff">最多4人</span>)</span>
        </div>
        <div v-for="(comparedItem,index) in comparedList" :key="index" style="text-align: center">
          <el-avatar :size="60" :src="comparedItem.comparedCircleUrl"></el-avatar>
          <p>{{ comparedItem.comparedUserName }}</p>
        </div>
        <el-button type="success" plain @click="goToCompared()">对比</el-button>
        <el-button type="danger" plain @click="clearCompared()">清空</el-button>
      </el-card>
    </div>

    <div id="app" style="width: 50%;margin: auto;padding-top: 10px">
      <el-card shadow="always" style="text-align: center">
        <p style="font-size: 20px;font-weight:bold"><i class="el-icon-edit"/> 筛选人才</p>
      </el-card>
      <ProgrammerComponents
          @toCompared="getCompared(data)"
          @toInfoMain="getInfoMain(data.userId)"
          v-for="data in dataList"
          :key="data.userId"
          :data="data">
      </ProgrammerComponents>
    </div>

    <div v-if="dataList.length<2" style="width: 100%;height: 400px"></div>
    <div v-if="dataList.length<3&dataList.length>=2" style="width: 100%;height: 200px"></div>

  </div>
</template>

<script>
import ProgrammerComponents from "@/components/user/Components/Components/ProgrammerComponents";

export default {
  name: "chooseTalent",
  data() {
    return {
      dataList: [],
      comparedList: [],
      taskId: '',
    }
  },
  methods: {
    async initList() {
      const {data: res} = await this.$http.get('/task/applications/' + this.taskId)
      this.dataList = res.content.list
    },
    getInfoMain(userId) {
      this.$router.push({
        path: "/userLoginMain/userInfoMain",
        query: {userId: userId, taskId: this.taskId}
      })
    },
    //对比
    getCompared(data) {
      let flag = true;
      if (this.comparedList.length < 4) {
        for (let i = 0; i < this.comparedList.length; i++) {
          if (this.comparedList[i].comparedUserId === data.userId) {
            flag = false;
          }
        }
        if (flag) {
          let newObj = {}
          newObj.comparedUserId = data.userId
          newObj.comparedCircleUrl = data.imageUrl
          newObj.comparedUserName = data.nickName
          this.comparedList.push(newObj)
        }
      }
    },
    goToCompared() {
      if (this.comparedList.length >= 2) {
        this.$router.push({
          path: "/userLoginMain/compared",
          query: {dataList: this.comparedList}
        })
      }
    },
    clearCompared() {
      this.comparedList = []
    },
  },
  mounted() {
    this.taskId = this.$route.query.taskId
    this.initList()
  },
  components: {
    ProgrammerComponents
  }
}
</script>

<style scoped>

</style>